<template>
  <div class="sourceList">
    <div class="tb-head">
      <el-button @click="dialogShow=true" icon="upload2">上传音频</el-button>
    </div>
    <div class="sourceBox" v-loading="loading">
      <div class="noMessage" v-if="sourceList.list.length==0">暂无音频内容</div>
      <audio-item v-else class="list-item" v-for="item,n in sourceList.list" :data="item" :key="n.toString()"></audio-item>
    </div>
    <!-- 上传视频弹出层 -->
    <el-dialog title="新建音频" :visible.sync="dialogShow" width="30%" custom-class="dialog_upload" @open="initUpload">
      <el-row>
        <div class="field-tit">内容性质:</div>
        <div class="field-bd">
          <el-select v-model="contentType">
            <el-option v-for="item,n in attrs" :label="item.name" :value="item.id" :key="n.toString()"></el-option>
          </el-select>
        </div>
      </el-row>
      <el-row>
        <div class="field-tit">选择文件:</div>
        <div class="field-bd">
          <el-upload ref="upload"
            class="upload"
            :action="baseUrl + '/content/source/upload/audio'"
            :data="params"
            :headers="headers"
            :on-success="handleSuccess"
            :on-error="handleError"
            :before-upload="handleBeforeUpload"
            :auto-upload="false"
            :file-list="fileList">
            <el-input placeholder="请选择文件" class="input-upload">
              <el-button slot="append">浏览</el-button>
            </el-input>
            <div slot="tip" class="el-upload__tip">只能上传mp3文件</div>
          </el-upload>
        </div>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="dialogShow=false;">关闭</el-button>
        <el-button type="primary" @click="handleSaveAudio" :loading="isSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import env from '@/config/env'
  import audioItem from '@/components/common/content/audioItem'
  export default{
    props: ['loading'],
    components: {audioItem},
    data () {
      return {
        baseUrl: env.baseUrl,
        name: '',
        fileList: [],
        contentType: null,
        dialogShow: false,
        isSave: false
      }
    },
    computed: {
      ...mapState({
        sourceList: state => state.sourceManage.audioList,
        attrs: state => state.contentManage.contentType
      }),
      // 文件上传附加的头部
      headers () {
        return {
          UBToken: localStorage.getItem('UBToken')
        }
      },
      // 文件上传附加的参数
      params () {
        return {
          contentType: this.contentType
        }
      }
    },
    methods: {
      // 上传成功回调
      handleSuccess (res, file, fileList) {
        this.$bus.$emit('reloadSource')
        this.isSave = false
        this.dialogShow = false
        if (res.code !== 1) {
          this.$message({
            type: 'warning',
            message: res.msgZ
          })
          fileList.forEach((item, n) => {
            if (item === file) {
              fileList.splice(n, 1)
            }
          })
        }
      },
      handleError (res) {
        this.isSave = false
        this.$message.warning(res.msgZ)
      },
      // 上传前的检验
      handleBeforeUpload (file) {
        const allowTypes = ['audio/mp3']
        if (allowTypes.indexOf(file.type) === -1) {
          this.$message.warning('格式不支持')
          return false
        }
        this.isSave = true
      },
      // 保存
      handleSaveAudio () {
        if (!this.contentType) {
          this.$message.warning('请选择内容性质')
          return
        }
        if (!this.$refs.upload.uploadFiles.length) {
          this.$message.warning('请选择音频内容')
          return
        }
        this.$refs.upload.submit()
      },
      // 初始化上传
      initUpload () {
        this.contentType = ''
        this.$refs.upload && this.$refs.upload.clearFiles()
      }
    }
  }
</script>
